const app = getApp()
Page({
  change: function () {
    wx.navigateTo({
      url: '/pages/network/shipment',
    })
  },
  drawProgressbg: function () {
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    ctx.setLineWidth(15);// 设置圆环的宽度
    ctx.setStrokeStyle('#94918e'); // 设置圆环的颜
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(110, 110, 85, 0, 2 * Math.PI, false);
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },
  drawCircle: function (step) {
    var context = wx.createCanvasContext('canvasProgress');
    // 设置渐变
    var gradient = context.createLinearGradient(200, 100, 100, 200);
    gradient.addColorStop("0", "#2661DD");
    gradient.addColorStop("0.5", "#40ED94");
    gradient.addColorStop("1.0", "#5956CC");
    context.setLineWidth(15);
    context.setStrokeStyle(gradient);
    context.setLineCap('round')
    context.beginPath();
    // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(110, 110, 85, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    context.stroke();
    context.draw()
  },
  data: {
    progress_txt: '正在查询...',
    count: 0,// 设置 计数器 初始为0
    countTimer: null, // 设置 定时器 初始为null
    step: 0
  },
  countInterval: function (step) {
    // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
    this.countTimer = setInterval(() => {
      if (this.data.count <= step * 30) {
        /* 绘制彩色圆环进度条  
        注意此处 传参 step 取值范围是0到2，
        所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
        */
        this.drawCircle(this.data.count / (60 / 2))
        this.data.count++;
      } else {
        this.setData({
          progress_txt: "流量已用" + parseFloat(this.data.step2 / this.data.step3 * 100).toFixed(2) + "%",
        });
        clearInterval(this.countTimer);
      }
    }, 50)
  },
  onLoad: function (options) {
    var that = this;
    var cookie = wx.getStorageSync("cookie");
    wx.request({
      url: app.globalData.netUrl + 'api/net/search/',
      method: 'POST',
      header: {
        'Content-type': 'application/x-www-form-urlencoded',
        //'Cookie': cookie
      },
      data:{
        'Cookie': cookie
      },
      success: res => {
        var net = res.data.data;
        var onlinestatus = net.onlinestate;
        if (onlinestatus == 1) {
          onlinestatus = "在线";
        } else {
          onlinestatus = "离线";
        }
        var overdata = net.overdata;
        if (overdata == "") {
          overdata = '---'
        }
        that.setData({
          net: net,
          onlinestatus: onlinestatus,
          overdata: overdata,
        });
        var stepTemp2 = ((parseFloat(res.data.data.net_balance) / 1024).toFixed(2));
        var length = res.data.data.serivce.length;
        var stepTemp3 = parseFloat(res.data.data.serivce[length - 3] + res.data.data.serivce[length - 2]);
        var stepTemp1 = (stepTemp2 / stepTemp3 * 2).toFixed(2);
        that.setData({
          step1: stepTemp1,
          step2: stepTemp2,
          step3: stepTemp3
        })
        this.countInterval(stepTemp1)
      }
    })
  },
  onReady: function () {
    this.drawProgressbg();
    this.drawCircle();
  }
})